<template>
<div class="container">
  <van-nav-bar
      title="选择地址"
      left-text="返回"
      left-arrow
      fixed
      right-text="添加"
      @click-left="goBack"
      @click-right="addAddress"
  />
    <div v-for="item in this.addList" @click="update(item)" :key="item" class="address">
      <div class="nameTel"><p>{{item.buyPeople}}  {{item.telephone}}</p> </div>
      <div class="addr"><p>{{item.address}}</p></div>
    </div>
  <div v-if="addList.length==0" class="address" style="font-size: 20px;color: #999">
    没有地址，请添加
  </div>
  </div>
</template>

<script>
export default {
  name: "SelectAddress",
  data(){
    return{
         addList:[]
    }
  },
  created() {
    this.getAddressList()
  },
  methods:{
    update(item){
      let data=Object.assign(item,{
        selected:true
      })
        this.$http.put(`/address/${item.id}`,data).then(()=>{
         this.$router.push('/SubmitOrder')
        })
    },
    addAddress(){
      this.$router.push('/AddressPage')

    },
    goBack() {
      this.$router.back()
    },
    //获取地址列表
    getAddressList(){
      this.$http.get('/address').then((res)=>{
        this.addList=res.data.result
      })
    }

  }
}
</script>

<style scoped lang="less">
html{
  height: 100%;
  .container{
    height: 100%;
    padding: 50px 0 50px 0;
    .address{
      margin-top: 5px;
      background-color: #cccccc;
      position: relative;
      width: 100%;
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items:flex-start;
      align-content: space-around;
      padding: 10px 30px;
      .addr{
        margin-top: 10px;
      }
      .icon{
        position: absolute;
        width: 50px;
        height: 50px;
        font-size: 40px;
        right: 60px;
        top: 20px;
        color: #666666;
      }
    }
  }
}
</style>
